<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>

<!--<link th:href="@{/ajax/libs/webuploader/webuploader.css}" rel="stylesheet"/>
<link th:href="@{/css/demo/webuploader-demo.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>-->
<link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
<body class="white-bg">
<div class="ibox-content">
    <form action="" method="post" class="form-horizontal m" id="form-ordersHead-add" th:object="${ordersDetail}">
        <input id="id" name="id" th:field="*{id}" type="hidden">
        <div class="form-horizontal m">

            <div class="form-group">
                <label class="col-sm-3 control-label">Order ID：</label>
                <div class="col-sm-9">
                    <input type="text" readonly class="form-control" th:field="*{orderID}" id="orderID" name="orderID">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">surfaceBill：</label>
                <div class="col-sm-9">
                    <span th:if='*{surfaceBillUrl !=null }'>
                            <button shiro:hasPermission="module:allOrder:print" type="button" class="btn btn-primary"
                                    id="printFaceBill" data-loading-text="Loading..."
                                    th:onclick="'javascript:print(\''+'#surfaceBillUploadIMG'+'\',\''+${ordersDetail.id}+'\')'">printing surfaceBill</button>
                        </span>
                    <div id="image_links">
                        <a th:href="*{surfaceBillUrl}" th:title="*{surfaceBillName}" data-gallery="">
                            <img th:src="*{surfaceBillUrl}" class="img-responsive" id="surfaceBillUploadIMG" th:alt="*{surfaceBillName}">
                        </a>
                    </div>
                    <input type="hidden" th:field="*{surfaceBillName}" name="surfaceBillName"
                           id="surfaceBillUploadName"/>
                    <input type="hidden" th:field="*{surfaceBillUrl}" name="surfaceBillUrl" id="surfaceBillUploadUrl"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">sendBill：</label>
                <div class="col-sm-9">
                    <span th:if='*{sendBillUrl !=null }'>
                            <button shiro:hasPermission="module:allOrder:print" type="button" class="btn btn-primary" id="printBill" data-loading-text="Loading..." th:onclick="'javascript:print(\''+'#sendBillUploadIMG'+'\',\''+${ordersDetail.id}+'\')'">printing sendBill</button>
                        </span>
                    <div id="image_links1">
                        <a th:href="*{sendBillUrl}" th:title="*{sendBillName}" data-gallery="">
                            <img th:src="*{sendBillUrl}" class="img-responsive" id="sendBillUploadIMG" th:alt="*{sendBillName}">
                        </a>
                    </div>
                    <input type="hidden" th:field="*{sendBillName}" name="sendBillName" id="sendBillUploadName" />
                    <input type="hidden" th:field="*{sendBillUrl}" name="sendBillUrl" id="sendBillUploadUrl" />
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12 col-sm-offset-3">
                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">close</button>
                </div>
            </div>
        </div>

    </form>

    <form action="" method="post" hidden="hidden" enctype="multipart/form-data">
        <input type="file" name="surfaceBill" id="surfaceBillUpload" accept="image/*" onchange="uploadIMG(this.id);"/>
    </form>
    <form action="" method="post" hidden="hidden" enctype="multipart/form-data">
        <input type="file" name="sendBill" id="sendBillUpload" accept="image/*" onchange="uploadIMG(this.id);"/>
    </form>

</div>

<div th:include="include::footer"></div>
<script type="text/javascript">
    initialize_image();
    initialize_image2();

    var prefix = ctx + "module/ordersDetail"
    $("#form-ordersHead-add").validate({
        rules: {
            xxxx: {
                required: true,
            },
        },
        submitHandler: function (form) {
            //$.operate.save(prefix + "/updateBill", $('#form-ordersHead-add').serialize());
            updateBill();
        }
    });

    function updateBill () {
        var formData = $('#form-ordersHead-add').serialize();
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "module/ordersDetail/updateBill",
            data: formData,
            async: false,
            error: function (request) {
                $.modal.alertError("system error");
            },
            success: function (data) {
                $.operate.saveSuccess(data);
            }
        });
    }

</script>
<script>
    //var BASE_URL = [[@{/ajax/libs/webuploader}]];
</script>
<!--<script th:src="@{/ajax/libs/webuploader/webuploader.js}"></script>
<script th:src="@{/js/demo/webuploader-demo.js}"></script>-->
<!-- DROPZONE -->
<script th:src="@{/ajax/libs/jquery-migrate/jQuery.print.min.js}"></script>
<script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script>

    function uploadIMG (id) {
        var img = $('#' + id + 'IMG');
        var button = $('#' + id + 'Btn');
        var fileInput = document.getElementById(id);
        var file = fileInput.files[0];
        if (file === undefined || file.size <= 0) {
            return;
        }

        var formData = new FormData();
        formData.append('img_file', file);

        var $btn;

        $.ajax({
            url: prefix+'/FileUploadServlet',
            dataType: 'json',
            type: 'POST',
            mimeType: "multipart/form-data",
            processData: false,
            contentType: false,
            data: formData,
            success: function (data) {
                img.attr('src', "/profile/" + data.detail);
                img.parent().attr('href', "/profile/" + data.detail);
                $('#' + id + 'Name').val(data.msg);
                $('#' + id + 'Url').val(data.detail);
            },
            error: function (data) {
            },
            beforeSend: function (data) {
                $btn = $(button).button('loading');
            },
            complete: function (data) {
                $btn.button('reset');
            }
        });

    }

    $(function () {
    })

    //单张打印
    function print (billType, id) {
        //jquery打印方法
        $("" + billType + "").print({
            //是否读取页面的样式
            globalStyles: true,
            //添加与attrbute media=打印的链接。
            mediaPrint: false,
            //在隐藏的iframe中打印。
            iframe: true,
            //不打印 的内容（选择器）
            noPrintSelector: ".avoid-this",
            //在打印的html之前添加内容
            prepend:billType=="#surfaceBillUploadIMG"?"<div style='width: 100%;height: 80px'></div>":"<div style='width: 100%;height: 0px'></div>",
            //在打印的html之后添加内容,这里添加的直接可以是jquery元素
            // append:aa ,
            //在window.print()调用后resolve一个jQuery.Deferred对象---点击浏览器的打印按钮以后的回调函数
            deferred: $.Deferred().done(function () {
                //判断打印的单据
                if (billType == '#surfaceBillUploadIMG') {
                    $.ajax({
                        url: prefix+'/edit',
                        dataType: 'json',
                        type: 'post',
                        data: {
                            id: id,
                            surfaceBillPrint: 1,
                        },
                        success: function (data) {
                            // window.parent.location.reload();
                        }
                    });
                } else {
                    $.ajax({
                        url: prefix+'/edit',
                        dataType: 'json',
                        type: 'post',
                        data: {
                            id: id,
                            sendBillPrint: 1,
                        },
                        success: function (data) {
                            // window.parent.location.reload();
                        }
                    });
                }

            })
        });
    }


</script>
</body>
</html>
